<template>
  <div>

    <el-row>
      <el-col :span="20">
        <template>
          <el-form :inline="true" :model="questionPage" class="demo-form-inline">
            <el-form-item label="题目">
              <el-input v-model="questionPage.questionTopic" placeholder="题目" style="width: 140px;"></el-input>
            </el-form-item>
            <el-form-item label="难度">
              <el-input v-model="questionPage.questionDifficulty" placeholder="难度"></el-input>
            </el-form-item>
            <el-form-item label="题型">
              <el-input v-model="questionPage.questionType" placeholder="题型"></el-input>
            </el-form-item>
            <el-form-item label="科目类型">
              <el-input v-model="questionPage.questionCourse" placeholder="科目类型"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-col>


      <el-col :span="4">
        <template>
          <el-row>

            <el-button icon="el-icon-message" size="small" type="success" @click="add()">新增</el-button>
          </el-row>
        </template>
        <br>
      </el-col>
    </el-row>




<br>
    <!-- :data 绑定的json数组-->
    <el-table :data="list" style="width:100%">

<!-- label是设置列名称-->
      <el-table-column label="题号" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionId}}</span>
        </template>
      </el-table-column>

      <!-- label是设置列名称-->
      <el-table-column label="题目题干" width="400">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionTopic}}</span>
        </template>
      </el-table-column>

      <!-- label是设置列名称-->
      <el-table-column label="科目类型" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionCourse}}</span>
        </template>
      </el-table-column>

      <!-- label是设置列名称-->
      <el-table-column label="科目类型" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionCourse}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="题目难度" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionDifficulty}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="A" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionA}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="B" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionB}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="C" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionC}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="D" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionD}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="分数" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionScore}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="答案" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionAnswer}}</span>
        </template>
      </el-table-column>
      <!-- label是设置列名称-->
      <el-table-column label="题目类型" width="100">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <span>{{x.row.questionType}}</span>
        </template>
      </el-table-column>


      <!-- label是设置列名称-->
      <el-table-column label="操作" width="200">
        <!-- solt-scope 插槽-->
        <template slot-scope="x">
          <el-button type="success" size="small" icon="el-icon-edit" @click="edit(x.$index,x.row)">编辑</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="del(x.$index,x.row)">删除</el-button>

        </template>
      </el-table-column>

    </el-table>

    <div class="block">
      <!-- size-change 下拉框选择触发的事件-->
      <!-- size-change 选择当前页码触发的事件-->
      <!-- current-page 当前页绑定的值-->
      <!-- page-size 总页数-->
      <!-- total 总条数-->
        <el-pagination

          @size-change="selectRow"
          @current-change="currentPage"
          :current-page="questionPage.page"
          :page-sizes="[3,5,7,10]"
          :page-size="questionPage.row"
          layout="total, sizes, prev, pager, next, jumper"
          :total="questionPage.total"
          >
        </el-pagination>

        <!-- 对话框-->
        <el-dialog :title="title" :visible="isShow" :before-close="closeWin" width="30%">
          <el-form label-width="80px">
            <br>
            <el-form-item label="题目" >
              <el-col :span="20">
                  <el-input v-model="question.questionTopic"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="科目类型" >
              <el-col :span="20">
                  <el-input v-model="question.questionCourse"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="题目难度" >
              <el-col :span="20">
                  <el-input v-model="question.questionDifficulty"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="A选项" >
              <el-col :span="20">
                  <el-input v-model="question.questionA"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="B选项" >
              <el-col :span="20">
                  <el-input v-model="question.questionB"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="C选项" >
              <el-col :span="20">
                  <el-input v-model="question.questionC"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="D选项" >
              <el-col :span="20">
                  <el-input v-model="question.questionD"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="分数" >
              <el-col :span="20">
                  <el-input v-model="question.questionScore"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="答案" >
              <el-col :span="20">
                  <el-input v-model="question.questionAnswer"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="题目难度" >
              <el-col :span="20">
                  <el-input v-model="question.questionType"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="题目类型" >
              <el-col :span="20">
                  <el-input v-model="question.questionDifficulty"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="8"></el-col>
              <el-col :span="8">
                <el-button type="success" round icon="el-icon-apple" @click="sure()">确定</el-button>
              </el-col>
              <el-col :span="8">
                <el-button type="success" round>取消</el-button>
              </el-col>

            </el-form-item>
          </el-form>
        </el-dialog>

      </div>

  </div>
</template>

<script>
  export default {
    name:"question",
    data(){
      return{
        isShow:false,//对话框是否显示
        question:{//对话框中的表单对象数据绑定
          questionId:0,
          questionTopic:"",
          questionCourse:"",
          questionDifficulty:"",
          questionA:"",
          questionB:"",
          questionC:"",
          questionD:"",
          questionScore:0,
          questionAnswer:"",
          questionType:"",
          subjectId:0,
        },
        option:[//选择框
          {label:"成都",value:"成都"},
          {label:"南充",value:"南充"},
          {label:"重庆",value:"重庆"}
        ],
        list:[],
        title:"修改",
        questionPage:{
          page:1,
          row:3,
          total:0,
          questionTopic:null,
          questionDifficulty:null,
          questionType:null,
          questionCourse:null

        }
      }
    },
    methods:{
      dd(x){

      },
      edit(index,x){//编辑
        console.log(index);
        console.log(x);
        //显示对话框
        this.isShow = true;
        this.title = "修改";
        //数据回显
        this.question.questionId = x.questionId;
        this.question.questionTopic = x.questionTopic;
        this.question.questionCourse = x.questionCourse;
        this.question.questionDifficulty = x.questionDifficulty;
        this.question.questionA = x.questionA;
        this.question.questionB = x.questionB;
        this.question.questionC = x.questionC;
        this.question.questionD = x.questionD;
        this.question.questionScore = x.questionScore;
        this.question.questionAnswer = x.questionAnswer;
        this.question.questionType = x.questionType;
        this.question.subjectId = x.subjectId;


      },
      del(index,x){
        var self=this;
        this.$confirm("你确定要删除吗？").then(function(){
          $.ajax({
            url:"http://localhost:8080/question/delete",
            type:"get",
            data:{"id":x.questionId},
            dataType:"json",
            success:function(data){
              console.log(data);
              self.$message(data.info);
              if(data.info=="删除成功"){
                  self.isShow=false;
                  //刷新
                  self.loadData();
              }
            }
          })
        }).catch(function(){
          self.$message("你取消删除")
        })

      },
      add:function(){//新增对话框
          //显示对话框
          this.isShow = true;
          this.title = "新增";
          //数据回显
          this.question.questionId = null;
          this.question.questionTopic = "";
          this.question.questionCourse = "";
          this.question.questionDifficulty = "";
          this.question.questionA = "";
          this.question.questionB = "";
          this.question.questionC = "";
          this.question.questionD = "";
          this.question.questionScore = null;
          this.question.questionAnswer = "";
          this.question.questionType = "";
          this.question.subjectId = null;
      },
      sure(){//关闭对话框
        // this.isShow = false;
        var self =this;
        var url = "";
        if(this.title=="修改"){
          url = "http://localhost:8080/question/update";
        }else{
          url = "http://localhost:8080/question/add";
        }

        $.ajax({
          url:url,
          type:"get",
          data:self.question,
          dataType:"json",
          success:function(data){
            console.log(data);
            self.$message(data.info);
            if(data.info=="保存成功"){
                self.isShow=false;
                //刷新
                self.loadData();
            }
          }
        })
      },
      loadData(){// 加载所有题库信息
        // this.isShow = false;
        var self =this;
        $.ajax({
          url:"http://localhost:8080/question/listGet",
          type:"get",
          data:self.questionPage,
          dataType:"json",
          success:function(data){
            console.log(data);
            self.list = data.list;
            //总条数
            self.questionPage.total = data.total;
          }
        })
      },
      closeWin(){
        this.isShow = false;
      },

      selectRow(row){//分页下拉框触发的事件
        this.questionPage.row=row;
        //刷新
        this.loadData();
      },
      currentPage(curPage){//页码触发事件
        this.questionPage.page=curPage;
        //刷新
        this.loadData();

      }
    },
      mounted(){
        this.loadData();
    }
  }
</script>

<style>
</style>
